body{
 background: #fff;
}
.item input:-ms-input-placeholder{color:#aaa}/* Internet Explorer 10+ */ 
.item input::-webkit-input-placeholder{color:#aaa}/* WebKit browsers */
.item input::-moz-placeholder{color:#aaa}/* Mozilla Firefox 4 to 18 */ 
.item input:-moz-placeholder{color:#aaa}/* Mozilla Firefox 19+ */ 
.item input{
 width: 100%;
 border: 1px solid #ddd;
 border-radius: 2px;
 color: #333;
 font-size: 14px;
 padding: 10px;
 height: 38px;
 vertical-align: middle;
 border-radius: 4px;
}
input{
 outline: none;
 background-color: white;
 -webkit-rtl-ordering: logical;
 cursor: text;
 padding: 1px;
 border-width: 2px;
 border-style: inset;
 border-color: initial;
 border-image: initial;
 text-rendering: auto;
 color: initial;
 letter-spacing: normal;
 word-spacing: normal;
 text-transform: none;
 text-indent: 0px;
 text-shadow: none;
 display: inline-block;
 text-align: start;
 margin: 0em;
 font: 400 13.3333px Arial;
}
.item input.error {
 border-color: #f66495;
}
.blue{
  color: rgb(20, 169, 243);
}
*{
 color: #333;
 text-shadow: none;
}
.item{
 margin-bottom: 15px;
}
.head-bg{
 background: #00a0d8;
 height: 96px;
 text-align: center;
 margin-top: 70px;
 width: 100%;
 min-width: 1200px;
}
.head-bg img{
 height: 118px;
 background-size: contain;
}
.changePwd{
  margin-left: 40px;
  margin-top: 20px;
  font-size: 14px;
  cursor: pointer;
}
.changePwd:hover{
  color:#20a0ff;
}
#main{
width: 1200px;
min-height: 700px;
margin: 70px auto;
padding: 30px 20px;
box-sizing: border-box;
}
#main .titleLine{
 width: 980px;
 height: 28px;
 margin:0  auto;
 border-bottom: 1px solid #ddd;
 margin-bottom: 28px;
 text-align: center;
}
.titleLine .tt{
 height: 56px;
 line-height: 56px;
 margin: 0 auto;
 padding: 0 20px;
 font-size: 40px;
 background: #fff;
 text-align: center;
 color: #333;
}
.loginRegister{
 width: 425px;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 padding-top: 30px;
 margin: 0 auto;
}
ul{
 list-style: none;
}
.textClear{
 margin: 6px 2px;
 font-size: 12px;
 height: 20px;
 line-height: 20px;
 color: #f66495;
 overflow: hidden;
}
label{
 cursor: default;
}
 input[type="radio" i], input[type="checkbox" i] {
  background-color: #eee;
  cursor: default;
  padding: initial;
  border-radius:2px; 
  border:1px #bbb solid;
}
input[type="password"]{
  font-size: 20px;
}
input[type="password"]::placeholder{
  font-size: 14px;
}
.remember{
 margin-top: 10px;
}
.remember-me{
  width: 13px;
  height: 13px;
  margin-right: 3px;
}
label{
 font-size: 12px;
 line-height: 20px;
}
label span{
 padding: 0 10px;
 color: #ccc;
 width: 410px;
 font-size: 12px;
}
a{
 text-decoration: none;
}
a, img {
 border: none;
}
a {
 color: #00a1d6;
}
label a{
 font-size: 12px;
 float: right;
}

.btn-box{
 margin-top: 20px;
}
.btn-box .login:hover{
  background: #0381aa;
}
.btn-box .register:hover{
  background: #eee;
}
.btn-box .btn{
 color: #555;
 display: inline-block;
 height: 36px;
 border: 1px solid #ccc;
 border-radius: 2px;
 width: 184px;
 line-height: 34px;
 font-size: 14px;
 text-align: center;
 cursor: pointer;
 -webkit-transition: all .3s;
 -o-transition: all .3s;
 -moz-transition: all .3s;
 transition: all .3s;
}
.btn-box .btn:nth-child(2){
 float: right;
}
.login{
 background: #00a1d6;
 color: #fff !important;
 border: 1px solid #0381aa !important;
}
.registerMax{
  height: 40px !important;
  line-height: 38px !important;
  background: #00a1d6;
  color: #fff !important;
  border: 1px solid #0381aa !important;
}
.registerMax.disabled{
  color: rgba(0,0,0,.25) !important;
  background-color: #f5f5f5;
  border-color: #d9d9d9;
  cursor: not-allowed;
  background-image: none;
  border: 1px solid #ccc !important
}
.userInfo{
  width: 100%;
  height: 900px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,.14);;
}
.userInfo .info_menu{
  list-style: none;
  float: left;
  height: 100%;
  width: 150px;
  border-right: 1px solid #ddd;
  background: #fafafa;
}
.info_menu li{
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}
.info_menu li:hover{
  background: #ddd;
}
.info_menu .title{
  height: 55px;
  line-height: 55px;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  color: #aaa;
  text-align: center;
  cursor: default;
}
.info_menu li.active{
  background: #6cf;
  color: #fff;
}
.info_main{
  width: calc(100% - 150px);
  height: 100%;
  float: right;
}
.info_main li{
  width: 100%;
  height: 100%;
}
.info_main .infoTitle{
  width: 100%;
  height: 55px;
  padding-left: 30px;
  border-bottom: 1px solid #ddd;
}
.info_main .infoTitle .menuTitle{
  float: left;
  margin: 17px 0 0 5px;
  color: #00a1d6;
  font-size: 14px;
  cursor: default;
}
.info_main .infoTitle .icon{
  float: left;
  width: 4px;
  height: 16px;
  margin-top: 18px;
  background-color: #00a1d6;
  border-radius: 4px;
}
.info_main .info_info{
  width: calc(100% - 80px);
  min-height: 190px;
  border-bottom: 1px solid #e5e9ef;
  margin: 0 40px;
  padding-bottom: 40px;
  margin-top: 40px;
  position: relative;
}
.info_main .info_info .item{
  position: relative;
  width: 100%;
}
.info_info .item .notice{
  color: #f66495;
  font-size: 12px;
  margin-left: 115px;
  margin-top: -8px;
  height: 16px;
  min-width: 60%;
}
.info_info .item .prop{
  width: 95px;
  text-align: right;
  margin-right: 20px;
  float: left;
  line-height: 30px;
  padding: 0;
  color: #333;
}
.info_info .item .textInput{
  float: left;
  width: 225px;
  height: 30px;
  margin-right: 40px;
  line-height: 30px;
}
.info_info .title{
  width: 100%;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #333;
  margin-bottom: 50px;
}
.info_imgList{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-flow: row wrap;
}
.info_imgList .imgListItem{
  width: 82px;
  height: 82px;
  margin-right: 10px;
  margin-left: 10px;
  background: #ccc;
  margin-bottom: 20px;
  border-radius:4px;
  overflow: hidden; 
  cursor: pointer;
  border: 3px solid #6cf;
  transition: all .5s;
}
.info_imgList .imgListItem.select{
  border-color: #fb7299;
}
.messageRight{
  width: calc(100% - 700px);
  height: calc(100% - 135px);
  float: right;
  margin-top: 40px;
  border-left: 1px solid #e5e9ef;
  margin-bottom: 40px;
}
.messageRight .messageTitle{
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #333;
  text-align: center;
  width: 100%;
  cursor: pointer;
}
.messageChatArea{
  width: 100%;
  padding-top: 20px;
}
.messageChatArea .title{
  width: 100%;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}
.messageChatArea .content{
  width: calc(100% +20px);
  height: 376px;
  overflow: auto;
  cursor: default;
}
.messageChatArea .content .msg{
  width: 100%;
  position: relative;
  margin-bottom: 20px;
  display: flex;
}
.messageChatArea .content .msg img{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.msg .msgContentC .msgContent{
  
  display: inline-block;
}
.msgContent .msgContentTitle{
  margin-top: 5px;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
  padding:6px 10px;
}
.msgContent .msgContentTitle::before{
  content: '';
  clear: both;
}
.msg .msgContentC .msg{
  font-size: 12px;
}
.msg .msgContentC{
  margin: 0 10px;
  position: relative;
  display: flex;
  flex-flow: column wrap;
}
.msg.right{
  justify-content: flex-end;
}
.msg.right .other{
  text-align: right;
}
.msg.left .other{
  text-align: left;
}
.msg.right .msgContentTitle{
  float: right;
  background: #6cf;
}
.msg .other .time{
  font-size: 12px;
  color: #bbb;
}
.msg.left .msgContentTitle{
  float: left;
  background: #fb7299;
}
.msg.left{
  justify-content: flex-start;
}
.noMessageChat{
  width: 100%;
  text-align: center;
  height: 300px;
  line-height: 300px;
  font-size: 20px;
  color: #ccc;
}
.onlineList{
  width: calc(100% - 40px);
  margin: 20px auto;
  height: 500px;
  overflow: auto;
  border-top: 1px solid #e5e9ef;
}
.onlineList .onlineListItem{
  width: 100%;
  height: 70px;
  display: flex;
  transition:all .5s;
}
.userInfoOnline .others{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 20px;
}
.noticeMsg{
  display: inline-block;
  width: 160px;
  font-size: 12px;
  color: #bbb;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 8px;
}
.onlineList .onlineListItem.active{
  background: rgba(2, 200, 250, 0.1);
}
.onlineListItem .imgC{
  display: inline-block;
  padding:10px;
  position: relative;
}
.onlineListItem .imgC img{
  width: 50px;
  height: 50px;
  border-radius:50%; 
  cursor: pointer;
}
.onlineListItem .userInfoOnline{
  width: calc(100% - 70px);
  display: inline-block;
  padding: 10px 0;
  cursor: pointer;
}
.onlineListItem:hover{
  background: #f1f1f1;
}
.userInfoOnline .userNameOnline{
  font-size: 14px;
  height: 30px;
  padding-top: 5px;
  cursor: default;
}
.green{
  color: green;
  font-size: 12px;
}
.pur {
  color: rgb(243, 14, 243) !important;
  font-size: 12px;
}
.cff{
  color: #66ccff;
  font-size: 12px;
}
.levelSpan{
  font-size: 11px;
  color: #fff;
  padding: 2px 4px;
  border-radius: 4px;
}
.level0{
  background-color: #ffc1e0;
}
.level1{
  background-color: #ffaad5;
}
.level2{
  background-color: #ff95ca;
}
.level3{
  background-color: #ff79bc;
}
.level4{
  background-color: #ff60af;
}
.level5{
  background-color: #ff359a;
}
.level6{
  background-color: #ff0080;
}
.level7{
  background-color: #f00078;
}
.red{
  color: red;
  font-size: 12px;
}
.messageLeft{
  margin-left: 45px;
  width: 600px;
  height: calc(100% - 55px);
  float: left;
}
.messageArea{
  width: 100%;
  height: 330px;
  position: relative;
  border-bottom: 1px solid #e5e9ef;
}
#messageTextArea{
  width: 550px;
  resize: none;
  position: absolute;
  top: 100px;
  left: 20px;
  padding: 10px 10px;
  border-radius: 4px;
}
.toMessageName{
  top: 50px;
  position: absolute;
  left: 20px;
  height: 35px;
  width: 250px;
  padding: 0 10px;
  border-radius: 4px;
  border: 1px solid rgb(169, 169, 169);
}
.toMessageName::placeholder{
  color: #555;
}
.noticeDes{
  color: #aaa;
  line-height: 30px;
  font-size: 14px;
  font-weight: normal;
  float: right;
  margin-right: 20px;
}

.imgListItem img{
  width: 100%;
  height: 100%;
}
.info_headImg{
  width: calc(100% - 80px);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 50px 0 50px;
  border-bottom: 1px solid #e5e9ef;
  box-sizing: content-box;
}
.info_headImg .imgC{
  height: 200px;
  width: 200px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius:50%;
  border:1px solid #e5e9ef;
}
.info_headImg .imgC img{
  width: 110px;
  height: 110px;
  border-radius:50%;
  border:3px solid #6cf;
}
.info_headImg .imgC .showChangeImg{
  background-color: #00a1d6;
  border-color: #00a1d6;
  left: -27px;
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  padding: 10px;
}
.info_headImg .imgC .defaultImg{
  right: -27px;
  font-size: 12px;
  line-height: 16px;
  padding: 10px;
  color: #333;
}
.showChangeImg:hover{
  background-color: #20a0ff !important;
}
.info_headImg .imgC .defaultImg:hover{
  background-color: #00a1d6;
  border-color: #00a1d6;
  color: #fff;
}
.defaultBtnImg{
  background: #fff;
  border: 1px solid #e5e9ef;
  border-radius: 27px;
  cursor: pointer;
  text-align: center;
  width: 54px;
  height: 54px;
  position: absolute;
  top: 78px;
}

.textInput.disable{
  background: #eee;
}
.saveWrap{
  width: 100%;
  position: relative;
  margin-top: 20px;
}
.saveWrap button:hover{
  background-color: #20a0ff;
}
.saveWrap button{
  width: 110px;
  position: absolute;
  left: 40px;
  background: #00a1d6;
  color: #fff;
  border-color: #20a0ff;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  margin: 0;
  padding: 10px 15px;
  border-radius: 4px;
  outline: 0;
  border-style: none;
}
.info_info .item .des{
  color: #aaa;
  line-height: 30px;
  position: relative;
  font-size: 14px;
}

.info_main .index_info{
  width: calc(100% - 80px);
  height: 190px;
  border-bottom: 1px solid #e5e9ef;
  margin: 0 40px;
  padding-bottom: 40px;
  margin-top: 40px;
  position: relative;
}
.index_info .imgC{
  position: absolute;
  overflow: hidden;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #f1f1f1;
}
.index_info .top_msg{
  position: absolute;
  overflow: hidden;
  width: calc(100% - 100px);
  height: 24px;
  left: 80px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.top_msg .name{
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  color: #222;
  margin-right: 8px;
  cursor: default;
}
.top_msg .userType{
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 2px 4px;
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: #ccc;
  margin-right: 8px;
  line-height: 16px;
}
.top_msg .uid{
  color: #00a1d7;
  border-radius: 4px;
  font-size: 12px;
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 2px 4px;
  cursor: pointer;
  border: 1px solid #00a1d7;
  margin-right: 8px;
  line-height: 16px;
}
.top_msg .admin{
  border: 1px solid #6cf;
  background-color: #6cf;
}
.top_msg .zz{
  border: 1px solid #fb7299;
  background-color: #fb7299;
}
.index_info .top_level{
  position: relative;
  overflow: hidden;
  width: calc(100% - 100px);
  height: 24px;
  left: 80px;
  top: 45px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.top_level .levelProgress{
  background: #e5e9ef;
  border-radius:4px; 
  width: 350px;
  height: 24px;
  overflow: hidden;
  margin-right: 12px;
  display: inline-block;
  position: relative;
}
.levelProgress .progress{
  background: #fb7299;
  border-radius: 4px;
  width: 0;
  height: 100%;
  position: absolute;
  left: 41px;
  transition: all .7s;
}
.top_level .exp{
  display: inline-block;
  color: #99a2aa;
  font-size: 12px;
}
.top_level .editInfo:hover{
  border: 1px solid #00a1d7;
  color: #00a1d7;
}
.top_level .editInfo{
  position: absolute;
  width: 70px;
  height: 22px;
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #ced3db;
  color: #6d757a;
  text-align: center;
  cursor: pointer;
  line-height: 22px;
  left: 590px;
  font-size: 12px;
}
.top_level .logOut{
  left: 680px;
}
.exp span{
  color: #222;
  font-size: 12px;
}
.levelProgress .level{
  width: 45px;
  height: 100%;
  text-align: center;
  line-height: 24px;
  font-size: 12px;
  color: #fff;
  font-weight: 700;
  cursor: default;
  background: #fb7299;
  border-radius: 4px;
  position: absolute;
  left: 0;
}

.imgC img{
  width: 100%;
  height: 100%;
}

.top_bottom{
  position: relative;
  width: calc(100% - 100px);
  left: 80px;
  top: 60px; 
  cursor: default;
}
.top_bottom div{
  font-size: 14px;
  display: block;
  width: 90%;
  line-height: 26px;
  word-break: break-all;
}
.top_bottom div a{
  font-size: 14px;
  line-height: 20px;
}
.expSetting{
  width: calc(100% - 80px);
  margin: 0 40px;
  height: 300px;
  padding: 36px 0;
  border-bottom: 1px solid #e5e9ef;
}
.expSetting .expTable{
  width: 100%;
  height: calc(100% - 60px);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.expSetting .title{
  width: 100%;
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
}
.expTable .item{
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column wrap;
  margin-bottom: 0;
  border-right:1px solid #e5e9ef;
}
.expTable .item:last-child{
  border: none;
}
.expTable .item .itemImg{
  width: 72px;
  height: 72px;
  border-radius: 72px;
  background: url(https://s1.hdslb.com/bfs/static/account-fe/static/img/icons_m_2.57e5263.png) no-repeat;
  text-align: center;
  line-height: 72px;
  color: #fff;
  margin: 0 auto;
  background-position: -252px -636px;
  overflow: hidden;
}
.expTable .item .itemImg.success{
  background-position: -252px -508px;
  line-height: 200px;
}

.itemImg span{
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  font-style: normal;
}
.expTable .item .des{
  border-radius: 4px;
  background-color: #8a95a8;
  color: #fff;
  text-align: center;
  margin: 15px auto 0;
  font-size: 12px;
  padding: 3px 6px;
}
.expTable .item .des.no{
  background-color: #fff;
  color: #8a95a8;
}
.expTable .item .itemText{
  margin-top:10px;
  font-size: 13px;
}